﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="ColumnListBox" Namespace="ColumnListBox" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
<style type="text/css">    
	.myClass
	{
		font-family:Trebuchet MS;
	}
	.myClass .option
	{
		border-right:solid 1px Black;
		border-bottom:solid 1px Black;
		padding:5px;
	}		
	.myClass .column_even
	{
		background-color:#CCCCCC;
	}    
	.myClass .option_selected
	{
		background-color:Red;
		color:White;
	}    
</style>
</head>
<body>
    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
    <div class="page">
		<h1>Ajax ColumnListBoxExtender</h1>
		<p>This is the samples and documentation website for the Ajax ColumnListBoxExtender. This website is included in the full download of the control and published at <a href="http://ajaxcolumnlistbox.deap.nu">http://ajaxcolumnlistbox.deap.nu</a></p>
		
		<h2>Project homepage</h2>
		<p>The project homepage can be found at <a href="http://ajaxcolumnlistbox.codeplex.com">http://ajaxcolumnlistbox.codeplex.com</a>.
		There you can find the source code, downloads, give your feedback and more.</p>
    
		<h2>Samples and documentation</h2>
		<p>These samples describe how you can configure the ColumnListBoxExtender.</p>
		
		<span class="preHeader">Sample 1</span>
		<h3>Single selection</h3>
		<p>Single selection is the default behavior.</p>
		<asp:ListBox runat="server" ID="lbSample1" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID"></asp:ListBox>
		<asp:Label runat="server" ID="lblOutput1" CssClass="output" Visible="false"/>
		<cc1:ColumnListBoxExtender ID="colSample1" runat="server" TargetControlID="lbSample1" />
		<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><strong><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample1&quot;</span></strong><span style="color: blue">&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
&lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample1&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red"><strong>TargetControlID</strong></span><span style="color: blue"><strong>=&quot;lbSample1&quot;</strong> /&gt;</span></pre>
		
		<hr />
		
		<span class="preHeader">Sample 2</span>
		<h3>Multiselection</h3>
		<p>Set the SelectionMode property of the ListBox control to enable multiselecting. This supports selecting with shift and/or ctrl-keys as well as drag selecting.</p>
		<asp:ListBox runat="server" ID="lbSample2" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID"
			SelectionMode="Multiple"></asp:ListBox>
		<asp:Label runat="server" ID="lblOutput2" CssClass="output" Visible="false"/>	
		<cc1:ColumnListBoxExtender ID="colSample2" runat="server" TargetControlID="lbSample2" />		
		<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample2&quot;</span><span style="color: blue">
    </span><span style="color: red"><strong>SelectionMode</strong></span><span style="color: blue"><strong>=&quot;Multiple&quot;</strong>&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
&lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample2&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample2&quot; /&gt;</span></pre>
		
		<hr />
		
		<span class="preHeader">Sample 3</span>
		<h3>Setting the height</h3>
		<p>Set height by setting the Rows property of the ListBox control.</p>
		
		<asp:ListBox runat="server" ID="lbSample3" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID" SelectionMode="Multiple"
			Rows="10"></asp:ListBox>
		<asp:Label runat="server" ID="lblOutput3" CssClass="output" Visible="false"/>
		<cc1:ColumnListBoxExtender ID="colSample3" runat="server" TargetControlID="lbSample3" />
		
		<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample3&quot; </span><span style="color: red">SelectionMode</span><span style="color: blue">=&quot;Multiple&quot;
    </span><span style="color: red"><strong>Rows</strong></span><span style="color: blue"><strong>=&quot;10&quot;</strong>&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
&lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample3&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample3&quot; /&gt;
</span></pre>
				
		<hr />
		
		<span class="preHeader">Sample 4</span>
		<h3>Setting number of columns</h3>	
		<p>Set the number of columns by setting the Columns property of the ColumnListBoxExtender control (2 is default).</p>
		<asp:ListBox runat="server" ID="lbSample4" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID" Rows="10"></asp:ListBox>
		<asp:Label runat="server" ID="lblOutput4" CssClass="output" Visible="false"/>
		<cc1:ColumnListBoxExtender ID="colSample4" runat="server" TargetControlID="lbSample4"
			Columns="4" />
		<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample4&quot; </span><span style="color: red">Rows</span><span style="color: blue">=&quot;10&quot;&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
&lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample4&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample4&quot;
    </span><span style="color: red"><strong>Columns</strong></span><span style="color: blue"><strong>=&quot;4&quot;</strong> /&gt;</span></pre>
		
		<hr />
		
		<span class="preHeader">Sample 5</span>
		<h3>The Resizable property</h3>
		<p>The following two listboxes are placed within a div with a relative width of 60%. The second ColumnListBoxExtender has its Resizable property set to true. Change the width of the browser window to see the effect of this both in the first and second listbox. The downside of setting the Resizable property to true is that there will be a gap between the last column and the scrollbar.
		<br /><br />Also, reload the page when the window is narrow, then watch how the non resizable listbox behaves when the window is resized to a wider width.
		<br /><br />You should always set the Resizable property to true when the ListBox is placed within a container that has relative width, and never when it's not.</p>
	</div>
	
<div style="width:60%;margin:5px auto;">
	<asp:ListBox runat="server" ID="lbSample5a" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID" Rows="10">
	</asp:ListBox>
	<asp:Label runat="server" ID="lblOutput5a" CssClass="output" Visible="false"/>
	<cc1:ColumnListBoxExtender ID="colSample5a" runat="server" TargetControlID="lbSample5a"
		Columns="4" />	
	<br />
	<asp:ListBox runat="server" ID="lbSample5b" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID" Rows="10">
	</asp:ListBox>
	<asp:Label runat="server" ID="lblOutput5b" CssClass="output" Visible="false"/>
	<cc1:ColumnListBoxExtender ID="colSample5b" runat="server" TargetControlID="lbSample5b"
		Columns="4"
		Resizable="true" />		
</div>
    
    <div class="page">
<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">=&quot;</span><strong><span style="color: red">width</span>:<span style="color: blue">60%</span>;</strong><span style="color: red">margin</span>:<span style="color: blue">5px auto</span>;<span style="color: blue">&quot;&gt;
    &lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample5a&quot;</span><span style="color: blue"> </span><span style="color: red">Rows</span><span style="color: blue">=&quot;10&quot;&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
    &lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample5a&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample5a&quot;
        </span><span style="color: red">Columns</span><span style="color: blue">=&quot;4&quot; /&gt;    
    &lt;</span><span style="color: #a31515">br </span><span style="color: blue">/&gt;
    &lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample5b&quot; </span><span style="color: red">Rows</span><span style="color: blue">=&quot;10&quot;&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
    &lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample5b&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample5b&quot;
        </span><span style="color: red">Columns</span><span style="color: blue">=&quot;4&quot;
        </span><span style="color: red"><strong>Resizable</strong></span><span style="color: blue"><strong>=&quot;true&quot;</strong> /&gt;        
&lt;/</span><span style="color: #a31515">div</span><span style="color: blue">&gt;</span></pre>

		<hr />
		
		<span class="preHeader">Sample 6</span>
		<h3>Custom styling</h3>
		<p>The ColumnListBoxExtender renders a div structure to display all the options. The outer div is the one with the gray border and the right hand scroll. Let's call this the listboxDiv.
		Then there is one div per column and inside these there is one div per option, let's call these columnDivs and optionDivs.<br /><br />
		The columnDivs has a class value of <code>column</code> and the optionDivs has a class value of <code>option</code>. By setting the <code>CssClass</code> property of the ColumnListBoxExtender you will set the class value of the listboxDiv. If your classname is "myClass" you can then style the columnDivs and optionDivs through the style rules <code>.myClass .column</code> and <code>.myClass .option</code>.<br /><br />
		In addition to these class names every other column will also have a class value of <code>column_even</code> and every other option will have a class value of <code>option_even</code>, allowing you to create "alternating styling". Also, all selected options has a class value of <code>option_selected</code>.<br /><br />
		If you set the <code>CssClass</code> property you should be aware of the following:</p>
		<ul>
			<li>You <em>must</em> provide styling for <code><em>.myClass</em> .option_selected</code>, otherwise there will be no visual feedback to the user on which options are selected and not.</li>
			<li>You should not style in a way that will make optionDivs with different heights within the same listbox. This would break the auto scroll feature when drag selecting.</li>
		</ul>
			
		<p>For each kind of div there are some styling properties that are closely related to the behavior and mandatory layout of the listbox. These are set inline and will be impossible for you to override in your own stylesheet:</p>
		<ul>
			<li>listboxDiv: <code>border</code>, <code>height</code>, <code>overflow</code> and <code>padding</code></li>
			<li>columnDivs: <code>border-width</code>, <code>float</code>, <code>margin</code>, <code>padding</code> and <code>width</code></li>
			<li>optionDivs: <code>cursor</code>, <code>margin</code>, <code>overflow</code> and <code>white-space</code></li>
		</ul>

<asp:ListBox runat="server" ID="lbSample6" DataSourceID="odsProducts" DataTextField="Name" DataValueField="ID" Rows="10"></asp:ListBox>
<asp:Label runat="server" ID="lblOutput6" CssClass="output" Visible="false"/>
<cc1:ColumnListBoxExtender ID="colSample6" runat="server" TargetControlID="lbSample6"
	Columns="4" 
	CssClass="myClass" />
	
<pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">ID</span><span style="color: blue">=&quot;lbSample6&quot; </span><span style="color: red">Rows</span><span style="color: blue">=&quot;10&quot;&gt;/.../&lt;/</span><span style="color: #a31515">asp</span><span style="color: blue">:</span><span style="color: #a31515">ListBox</span><span style="color: blue">&gt;
&lt;</span><span style="color: #a31515">cc1</span><span style="color: blue">:</span><span style="color: #a31515">ColumnListBoxExtender </span><span style="color: red">ID</span><span style="color: blue">=&quot;colSample6&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">TargetControlID</span><span style="color: blue">=&quot;lbSample6&quot;
    </span><span style="color: red">Columns</span><span style="color: blue">=&quot;4&quot; 
    </span><span style="color: red"><strong>CssClass</strong></span><span style="color: blue"><strong>=&quot;myClass&quot;</strong> /&gt;</span></pre>

<pre class="code"><span style="color:blue">&lt;</span><span style="color:#a31515">style </span><span style="color:red">type</span><span style="color:blue">="text/css"&gt;    
    </span><span style="color:#a31515">.myClass
    </span>{
        <span style="color:red">font-family</span>:<span style="color:blue">Trebuchet MS</span>;
    }
    <span style="color:#a31515">.myClass .option
    </span>{
        <span style="color:red">border-right</span>:<span style="color:blue">solid 1px Black</span>;
        <span style="color:red">border-bottom</span>:<span style="color:blue">solid 1px Black</span>;
        <span style="color:red">padding</span>:<span style="color:blue">5px</span>;
    }        
    <span style="color:#a31515">.myClass .column_even
    </span>{
        <span style="color:red">background-color</span>:<span style="color:blue">#CCCCCC</span>;
    }    
    <span style="color:#a31515">.myClass .option_selected
    </span>{
        <span style="color:red">background-color</span>:<span style="color:blue">Red</span>;
        <span style="color:red">color</span>:<span style="color:blue">White</span>;
    }    
<span style="color:blue">&lt;/</span><span style="color:#a31515">style</span><span style="color:blue">&gt;</span></pre>		

    <hr />
    
	<span class="preHeader">All samples</span>
	<h3>Test the selections</h3>
	<p>Click this button to output the selected options in the listboxes above.</p>
	<asp:Button ID="btnOutput" runat="server" Text="Output selected options" 
			onclick="btnOutput_Click" />

    <hr />
    
    </div>

    
    <asp:ObjectDataSource ID="odsProducts" runat="server" SelectMethod="GetProducts" TypeName="Product" />
		

    
    </form>
</body>
</html>
